@inject BTCPayServer.Services.BTCPayServerEnvironment Env
@model BTCPayServer.Controllers.ShowLightningNodeInfoViewModel
@{
    Layout = null;
    ViewData["Title"] = $"{Model.StoreName} – {StringLocalizer["{0} Lightning Node", Model.CryptoCode]}";
    ViewData["StoreBranding"] = Model.StoreBranding;
}
<!DOCTYPE html>
<html lang="en" @(Env.IsDeveloping ? " data-devenv" : "")>
<head>
    <partial name="LayoutHead"/>
    <link href="~/main/qrcode.css" rel="stylesheet" asp-append-version="true"/>
    <style>#app { --wrap-max-width: 400px; }</style>
</head>
<body class="min-vh-100">
    <div id="app" class="public-page-wrap">
        <main class="flex-grow-1">
            <div class="d-flex flex-column justify-content-center gap-4">
                <partial name="_StoreHeader" model="(Model.StoreName, Model.StoreBranding)" />
                <section class="tile">
                    <h2 class="h4 card-subtitle text-center text-secondary mt-1 mb-3" id="LightningNodeTitle">
                        @StringLocalizer["{0} Lightning Node", Model.CryptoCode]
                    </h2>
                    <h4 class="d-flex align-items-center justify-content-center gap-2 my-4">
                        <span class="btcpay-status btcpay-status--@(Model.Available ? "enabled" : "disabled")" style="margin-top:.1rem;"></span>
                        <span id="LightningNodeStatus">@(Model.Available ? StringLocalizer["Online"] : StringLocalizer["Unavailable"])</span>
                    </h4>
                    @if (Model.Available)
                    {
                        @if (Model.NodeInfo.Any())
                        {
                            @if (Model.NodeInfo.Length > 1)
                            {
                                <div class="nav btcpay-pills justify-content-center gap-3 my-4" id="nodeInfo-tab" role="tablist">
                                    @for (var i = 0; i < Model.NodeInfo.Length; i++)
                                    {
                                        var nodeInfo = Model.NodeInfo[i];
                                        var title = nodeInfo.IsTor ? "Tor" : "Clearnet";
                                        <button class="btcpay-pill w-125px @(i == 0 ? "active" : "")" id="nodeInfo-tab-@i" data-bs-toggle="pill" data-bs-target="#nodeInfo-@i" type="button" role="tab" aria-controls="nodeInfo-@i" aria-selected="true">@title</button>
                                    }
                                </div>
                            }
                            <div class="tab-content" id="nodeInfo-tabContent">
                                @for (var i = 0; i < Model.NodeInfo.Length; i++)
                                {
                                    var nodeInfo = Model.NodeInfo[i];
                                    var title = nodeInfo.IsTor ? "Tor" : "Clearnet";
                                    var id = $"LightningNodeUrl{title}";
                                    var value = nodeInfo.ToString();
                                    <div class="tab-pane fade @(i == 0 ? "show active" : "")" id="nodeInfo-@i" role="tabpanel" aria-labelledby="nodeInfo-tab-@i">
                                        <div class="payment-box">
                                            <div class="qr-container">
                                                <vc:qr-code data="@value" />
												@if (Model.CryptoImage is not null)
												{
													<img src="@Model.CryptoImage" alt="@Model.CryptoCode" class="qr-icon" />
												}
											</div>
                                            <div class="input-group mt-3">
                                                <div class="form-floating">
                                                    <vc:truncate-center text="@value" padding="15" elastic="true" classes="form-control-plaintext" id="@id"/>
                                                    <label>@title</label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                }
                            </div>
                        }
                        else
                        {
                            <p class="text-center mt-4" text-translate="true">No public address available.</p>
                        }
                    }
                </section>
            </div>
        </main>
    </div>
    <partial name="LayoutFoot" />
</body>
</html>
